<template>
  <view class="echarts-wrap-cycle">
    <qiun-data-charts type="column" :opts="chartOpts" :chartData="chartData" ontouch="true" canvas2d="true"/>
  </view>
</template>

<script>

export default {
  data() {
    return {
      chartData: {},
      chartOpts: {
        padding: [15, 0, 10, 0],
        enableScroll: true,
        touchMoveLimit: 30,
        legend: {show: false},
        xAxis: {
          disableGrid: true,
          itemCount: 5,
          scrollAlign: 'right',
          marginTop: 6
        },
        yAxis: {
          data: [{tofix: 0}],
          splitNumber: 3
        },
        extra: {
          column: {
            type: "group",
            width: 26,
            activeBgColor: "#000000",
            activeBgOpacity: 0.08,
            barBorderRadius: [20, 20, 0, 0]
          }
        }
      }
    }
  },
  methods: {
    setData(cycleList = []) {
      const categories = cycleList.map(item => `${item.month}-${item.day}\n${item.other}`);
      const seriesData = cycleList.map(item => {
        const numerical = item.numerical || 0;
        const isAbnormal = numerical > 35 || numerical < 21;
        return {
          value: numerical,
          color: isAbnormal ? '#FFBB5E' : '#FF71A1'
        };
      });

      this.chartData = {
        categories,
        series: [{
          name: "周期长度",
          data: seriesData
        }]
      };
    }
  }
}
</script>

<style lang="scss">
@import "@/pages/record/index.less";
</style>
